<extend name='Public/demo' />

<block name='contents'>
    <div class="row">

              <aside class="profile-nav col-lg-12" >
              <button style="display:none" data-dialog="somedialog">加为好友</button>
              </aside>
          </div>

          <script type="text/javascript">
              //设置初始的页码
              var page = 1 ;
              //访问页面时 初始化好友推荐
              page = pajax(page);
              //设置是否继续发送ajax
              var ajaxturn = true;
              //得到当前的陌生人显示的总数
              var msr = $('.state-overview').length;
              //得到出发的阀值
              var fz = msr - 7;  // 设置开始启动ajax的阀值 默认为倒数第六个
              //设置ajax的状态
              var ajaxstatus = true; //当开始发送ajax 的时候 其值变为false
              //当鼠标经过索引为当前陌生人总数 - 6的元素时  出发ajax
              $('.state-overview:gt('+fz +')').live('hover',function(){
                if (ajaxstatus) {
                  ajaxstatus = false;
                  if (ajaxturn) {
                    page = pajax(page);
                  }
                  ajaxstatus = true;
                }
              });
              function pajax(p){
                $.post('{:U('Friend/ajaxring')}',{num:p},function(data){
                    if(data != null){
                      // 开始处理返回的数据
                      for (var i = 0; i <= data.length ; i++) {
                          var xb = null;
                          if (data[i]['sex'] == '1') {
                              xb = '男';
                          }else if(data[i]['sex'] == '0'){
                              xb = '女';
                          }else{
                              xb = '保密';
                          }
                          // 准备字符串
                          var str = '<div class=" state-overview col-lg-6" style="opacity:0.1;margin-left:-50px">\n\
                                              <section class="panel">\n\
                                                  <div class="symbol red">\n\
                                                      <img src="'+ data[i]['photo'] +'" style="width:70px;height:70px;border-radius:50%">\n\
                                                  </div>\n\
                                                  <div class="value">\n\
                                                      <h1>'+ data[i]['nickname']+'|'+ data[i]['user_id'] +'</h1>\n\
                                                      <p>'+ data[i]['username'] +'</p>\n\
                                                      <p>性别 : '+ xb +'  | <button class="btn btn-default btn-xs trigger" data="'+data[i]['user_id']+'" data-dialog="somedialog">加为好友</button></p>\n\
                                                  </div>\n\
                                              </section>\n\
                                          </div>';
                          $('.profile-nav').append(str);
                          $('.state-overview').animate({'opacity':'1','margin-left':'0px'},1000)
                      }
                      }else{
                        ajaxturn =false;
                      }
                })
                //页码自增
                return ++page ;
              }
          </script>


</block>

<block name='pdajax'>
    <script>
                  (function() {
                        var alertstr = document.getElementsByClassName('alertstr')[0];
                        var dlgtrigger = document.querySelector( '[data-dialog]' ),
                        somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
                        dlg = new DialogFx( somedialog );
                        var pd = null;
                        $('.trigger').live('click',dlg.toggle.bind(dlg));
                        $('.trigger').live('click',function(){
                        pd = $(this).attr('data');
                        var reg = $(this);

                        $.post("{$ajaxurl}",{pd:pd},function(data){
                            if (data =='yes') {
                                  $('.htmlstr').html('{$yesstr}');
                                  //删除当前添加好友的元素
                                    reg.parents('.state-overview').remove();
                            }else if(data =='no'){
                                  $('.htmlstr').html('{$nostr}');
                            }
                        });

                        });
                  })();
    </script>

    <script type="text/javascript">
        //当滚动条滚动的时候
        $('#main-content').scroll(function(){
            console.log('111');
        })
    </script>
    </block>
